<template>
    <div class="jingcai">
        <p class="jing">精彩剧集</p>
        <div class="tu">
            <div class="zuo">
                <img src="../../public/image/cardimg1.jpg" height="420" width="180"/>
            </div>
            <div class="mid">
                <ul>
            <li ><img src="../../public/image/cardimg5.jpg" height="200" width="140"/></li>
            <li ><img src="../../public/image/cardimg3.jpg" height="200" width="140"/></li>
            <li ><img src="../../public/image/cardimg4.jpg" height="200" width="140"/></li>
            <li><img src="../../public/image/cardimg1.jpg" height="200" width="140"/></li>
            <li><img src="../../public/image/cardimg5.jpg" height="200" width="140"/></li>
            <li><img src="../../public/image/cardimg3.jpg" height="200" width="140"/></li>
                </ul>
            </div>
            <div class="you">
                <img src="../../public/image/cardimg1.jpg" height="420" width="180"/>
            </div>


        </div>
    </div>
</template>

<script>
    export default {
        name: "jingcai"
    }
</script>

<style scoped>
    .jingcai{
        /*width: 1400px;*/
        /*height:440px ;*/
    }
    .jingcai ul{
        width: 480px;
    }
    .jingcai ul li{
        display: inline-block;
        margin-left: 10px;
    }
    .jing{
        margin: auto;
        width: 200px;
        height: 50px;
        line-height: 50px;
        color: whitesmoke;
        background-color: mediumpurple;
    }
    .tu{
        margin:0 auto;
    }
    .zuo {
        display: inline-block;
    }
    .mid {
        display: inline-block;
    }
    .you {
        display: inline-block;
    }
</style>